<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>五狗旺旺旺</title>
	<link rel="stylesheet" href="../css/bootstrap.min.css">
	<link href="../css/jcountdown.css" rel="stylesheet" type="text/css">
	<link rel="stylesheet" href="../css/app.css">
</head>
<body>
	
	<div class="container-fluid">
		<div class="row">
			<section class="game-player">
				<div class="col-md-8">
					<div class="scroller qrconde-container">
						<img src="../images/qrcode.png" alt="" class="qrcode">
						<div class="btn-container">
							<button type="button" class="btn btn-default start">开始</button>
							<button type="button" class="btn btn-default startgame">开始游戏</button>
							<button type="button" class="btn btn-default reset" disabled="disabled">重置</button>
						</div>
					</div>	
				</div>
				<div class="col-md-4 player-container">
					<h5>参与者(<span id="playerCount">0</span>/45)</h5>
					<div class="scroller">
						<ul class="player-list" id="player"></ul>	
					</div>
				</div>
			</section>
			<section class="game-winner">
				<div class="col-md-8">
					<div class="carousel-container">
						<div class="countdown"></div>
						<div id="puzzlepicturer">
							<div class="carousel slide">
								<ol class="carousel-indicators">
								    <li data-target="#puzzlepicturer" data-slide-to="0" class="active"></li>
								    <li data-target="#puzzlepicturer" data-slide-to="1"></li>
								    <li data-target="#puzzlepicturer" data-slide-to="2"></li>
								    <li data-target="#puzzlepicturer" data-slide-to="4"></li>
								    <li data-target="#puzzlepicturer" data-slide-to="5"></li>
								</ol>
								<div class="carousel-inner" role="listbox">
									<div class="item active">
										<img src="../images/game/01.jpg" alt="...">
									</div>
									<div class="item">
										<img src="../images/game/02.jpg" alt="...">
									</div>
									<div class="item">
										<img src="../images/game/03.jpg" alt="...">
									</div>
									<div class="item">
										<img src="../images/game/04.png" alt="...">
									</div>
									<div class="item">
										<img src="../images/game/05.jpg" alt="...">
									</div>
								</div>
							</div>
							<button type="button" class="btn btn-danger lucky">抽取惩罚者</button>
						</div>
					</div>
				</div>
				<div class="col-md-4 player-container">
					<h5>获胜者</h5>
					<div class="scroller" id="winner">
					</div>
				</div>
			</section>
			<section class="lucky-player">
				<div class="col-md-8">
					<div class="scroller">
						<div class="lucky-container">
							<h5><span id="lucky-count">0</span>/<span id="lucky-totalcount">0</span></h5>
							<ul class="lucky-list"></ul>
							<div class="clearfix"></div>
						</div>
					</div>	
				</div>
				<div class="col-md-4 player-container">
					<h5>幸运者</h5>
					<div class="scroller">
						<ul class="player-list" id="luckylist"></ul>	
					</div>
				</div>
			</section>
		</div>
	</div>

	<script src="../js/jquery.min.js"></script>
	<script src="../js/bootstrap.min.js"></script>
	<script src="../js/jquery.jcountdown.min.js"></script>
	<script src="../js/moment.min.js"></script>
	<script src="../js/mock-min.js"></script>
	<script src="../js/app.js"></script>
</body>
</html>